<!--
* @description 警情处置时间轴
* @author zywu
* @date 2021/04/29 14:58:11
!-->
<template>
  <div class="firealarm-timeline">
    <div ref="wrap" class="timeline-wrap">
      <div ref="content" class="timeline d-flex" :style="{ width:(465*dataList.length-20)+'px' }">
        <div v-for="item in dataList" :key="item.id" class="timeline__item">
          <template>
            <div class="d-flex ai-center">
              <div class="timeline__dot"></div>
              <div class="timeline__time">{{item.createTime}}</div>
              <div class="timeline__line"></div>
            </div>
            <div class="timeline__card">
              <div class="alarm-name d-flex ai-center">
                <!-- {{formatEventType(item.eventType)}} -->
                {{item.name}}
                <div class="alarm-type event-type" :class="eventClass(item)">{{item.description}}</div>
              </div>
              <div class="d-flex" v-for="(value,key) in item.eventContent" :key="key">
                {{key}}：
                <div class="alarm-desc" v-if="key=='现场情况'">
                  <template v-for="src in value">
                    <el-image
                      v-if="src.toLowerCase().indexOf('.mp4')>-1"
                      class="alarm-img"
                      :key="src"
                      :src="videoImg"
                      fit="fill"
                      @click="playVideo(src)"
                    ></el-image>
                    <el-image
                      v-else
                      class="alarm-img"
                      :key="src"
                      :src="src"
                      :preview-src-list="value.filter(n=>{ return n.toLowerCase().indexOf('.mp4')<0 })"
                      fit="fill"
                    ></el-image>
                  </template>
                </div>
                <div class="alarm-desc" v-else>{{value}}</div>
              </div>
            </div>
          </template>
          <!-- <template v-else-if="item.eventType==4">
          <div class="d-flex ai-center">
            <div class="timeline__dot"></div>
            <div class="timeline__time">{{item.createTime}}</div>
            <div class="timeline__line"></div>
          </div>
          <div class="timeline__card">
            <div class="alarm-name d-flex ai-center">电话通知</div>
            <div class="d-flex" v-for="(value,key) in item.eventContent" :key="key">
              {{key}}：
              <div class="alarm-desc">{{value}}</div>
            </div>
            <audio-player
              url="https://pro-ccrecords.kefutoutiao.com/linapp/cc_recordings/20210414195456_09770012-4afd-43c2-5611-2b2efde3dcc2_4ad82a7a-7a0a-4817-8f9a-85a139bd6755.mp3?OSSAccessKeyId=bPexlr6MCcadDhfu&Expires=1649937365&Signature=i1c4gzeY%2F9mnfmIiWaTNC%2FUBTq8%3D"
            ></audio-player>
          </div>
          </template>-->
          <!-- <template v-else-if="item.eventType==5">
          <div class="d-flex ai-center">
            <div class="timeline__dot"></div>
            <div class="timeline__time">{{item.createTime}}</div>
            <div class="timeline__line"></div>
          </div>
          <div class="timeline__card">
            <div class="alarm-name d-flex ai-center">{{item.name}}</div>
          </div>
          </template>-->
        </div>
      </div>
    </div>
    <el-button
      v-if="dataList.length>4"
      class="btn-scroll"
      type="primary"
      plain
      icon="el-icon-arrow-left"
      circle
      @click="handleScroll(1)"
    ></el-button>
    <el-button
      v-if="dataList.length>4"
      class="btn-scroll scroll-right"
      type="primary"
      plain
      icon="el-icon-arrow-right"
      circle
      @click="handleScroll()"
    ></el-button>
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="视频"
      width="1000px"
      top="10vh"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      @close="closeDialogHandle"
      v-dialogDrag
    >
      <video
        :src="videoSrc"
        controls="controls"
        height="600"
        width="960"
        style="margin-bottom:10px;outline:none;background:#000;"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
import AudioPlayer from './AudioPlayer'
export default {
  components: { AudioPlayer },
  props: {
    dataList: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      videoImg: require('../../assets/images/spray/video.png'),
      dialogVisible: false,
      videoSrc: '',
    }
  },
  computed: {},

  created() {},

  mounted() {},

  methods: {
    handleScroll(direction) {
      let x = this.$refs.content.getBoundingClientRect().x
      let length = 465 * this.dataList.length - 20
      let dist = 0
      if (direction == 1) {
        dist = x + 950 > 0 ? 0 : x + 950
      } else {
        dist = x - 950 < -length ? -length : x - 950
      }
      this.$refs.wrap.scrollTo(-dist, 0)
    },
    closeDialogHandle() {
      this.dialogVisible = false
    },
    playVideo(src) {
      this.videoSrc = src
      this.dialogVisible = true
    },
    formatEventType(type) {
      return ['', '发生警情', '警情推送', '警情处置', '警情关闭'][type]
    },
    eventClass(item) {
      let d = item.description
      if (item.eventType == 1) {
        let alarmType = 1
        if (d.indexOf('报警') > -1) {
          alarmType = 1
        } else if (d.indexOf('预警') > -1) {
          alarmType = 2
        } else if (d.indexOf('隐患') > -1) {
          alarmType = 3
        } else if (d.indexOf('故障') > -1) {
          alarmType = 4
        }
        return 'type1-' + alarmType
      } else {
        return 'type' + item.eventType
      }
    },
  },
}
</script>
<style lang='scss'>
.firealarm-timeline {
  position: relative;
  margin-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  &:hover {
    .btn-scroll {
      display: inline-block;
    }
  }
  .timeline-wrap {
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  .btn-scroll {
    // display: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    &.scroll-right {
      left: initial;
      right: 0;
    }
  }
  .alarm-img {
    margin: 0 10px 10px 0;
    width: 80px;
    height: 80px;
    object-fit: fill;
    cursor: pointer;
  }
  .timeline {
    .event-type {
      &.type1-1 {
        background: #fd5e5e;
      }
      &.type1-2 {
        background: rgba(254, 145, 28, 1);
      }
      &.type1-3 {
        background: rgba(255, 209, 13, 1);
      }
      &.type1-4 {
        background: rgba(67, 158, 255, 1);
      }
      &.type2 {
        background: #47cfad;
      }
      &.type3 {
        background: #49a2ff;
      }
      &.type4 {
        background: #49a2ff;
      }
    }
    &__item {
      margin-right: 20px;
      width: 445px;
      &:last-child {
        margin-right: 0;
        .timeline__line {
          display: none;
        }
      }
    }
    &__dot {
      margin-right: 8px;
      width: 13px;
      height: 13px;
      opacity: 1;
      background: #446bde;
      border-radius: 50%;
    }
    &__time {
      margin-right: 20px;
      color: #666;
    }
    &__line {
      flex: 1;
      height: 1px;
      background: #bebebe;
    }
    &__card {
      padding: 20px;
      margin-top: 10px;
      // height: 164px;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      overflow-y: auto;
      .alarm-name {
        margin-bottom: 10px;
        font-size: 18px;
      }
      .alarm-desc {
        flex: 1;
      }
    }
  }
}
</style>